{extend name="./public/base" /}
{block name="title"}我的花园{/block}
{block name="style"}
<style type="text/css">
	html,body{
		height: 100%;
		width: 100%;
	}

	.content{
		width: 100%;
		height:100%;
		background-color:#fff;
		font-size: 32px;
		color: #6e5858;
		background-color: red;
		background-image: url("__STATIC__/images/bj5.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		filter：blur（4px）;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 80px;
	    color: #fff;
	    text-align: center;
	    line-height: 80px;
	    font-size: 32px;
	    margin-bottom: 20px;
	}
	.one{
		text-align: center;
	    margin-top: 100px;
	    color: #ea9841;
	}
	.two{
		text-align: center;
	    margin-top: 30px;
	    color: #ea9841;
	    font-size: 48px;
	}
	.three{
		margin: auto;
	    text-align: center;
	    margin-top: 30px;
	    width: 40%;
	    height: 60px;
	    border-radius: 20px;
	    background-color: #ea9841;
	    line-height: 60px;
	    color: #fff;
	}
	.four{
		text-align: center;
	    margin-top: 60px;
	    color: #ea9841;
	    margin-bottom:320px;
	}
	.five{
		margin: auto;
		width: 90%;
	}

	.five .list{
		width: 20%;
		height:200px;
		margin: 20px;
		background-color: #bfdacc75;
		float: left;
		border-radius: 20px;
	}
	.line{
		height: 39px;
	    position: relative;
	    width: 116%;
	    left: -12px;
	    top: -40px;
	    background-color: #736565;
	    border-radius: 10px;
	}
	.over{
		position: absolute;
	}
	.over img{
		opacity:0.6;
	}
	

	
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span>{{text11}}</span>
		</div>
		<div class="flower_content">
			<div class="one">我拥有的鲜花</div>
			<div class="two">{{flowers_num}} 朵</div>
			<div class="three">购买鲜花</div>
			<div class="four">如何获取鲜花？</div>
			<div class="five">
				<div class="list" v-for='d in days'>
					<div v-if='is_pick == 1 && d == today' class="over"><img :src="over"></div>
					<img @click='pick(d)' style="width: 100%;height:100%;"  v-if='d == today' :src="rose_b" alt="">
					<img @click='pick(d)'  style="width: 100%;height:100%;" v-if='d != today':src="rose_s" alt="">
					<div class="line"></div>
				</div>
			</div>
		</div>
	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    members: [],
			    text11:'我的花园',
			    days:[1,2,3,4,5,6,7],
			    today:1,
			    rose_b:'__STATIC__/images/rose1.png',
			    rose_s:'__STATIC__/images/leaf1.png',
			    over:'__STATIC__/images/over1.png',
			    is_pick:0,
			    flowers_num:0,
			},
		    methods:{
		        get_user:function(e){
		        	var that = this;
		        	var mydate = new Date();
					var week = mydate.getDay();
					if(week == 0){
						week = 7;
					}
		        	that.today = week;
		        	$.ajax({
		        		url: host+'member/user_info',
		        		type: 'post',
		        		dataType: 'json',
		        		success:function(data){
		        			if(data.code == 1){
		        				that.is_pick = data.data.member_data.is_pick;
		        				that.flowers_num = data.data.member_data.flower_num;
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        pick:function(e){
		        	var that = this;
		        	if(that.today != e){
		        		$.toast('该花还未成熟','text');
		        		return;
		        	}else{
		        		$.ajax({
			        		url: host+'member/pick',
			        		type: 'post',
			        		dataType: 'json',
			        		data: {'day':e},
			        		success:function(data){
			        			$.toast(data.msg,'text');
			        			if(data.code==1){
			        				that.is_pick=1;
			        				that.flowers_num = data.data.user_info.flower_num;
			        			}else{
			        				that.is_pick=1;
			        			}
			        		},
			        		error:function(e){
			        			console.log('error'+e);
			        		}
			        	})	
		        	}
		        }
		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.get_user();
	            //console.log();
	        }

		})
		
		
		
	});
	$(document).on('click', '.mask_close', function(event) {
		console.log(12334);
		$('.mask_close').parent().parent().remove();
	});

	//复制
	var clipboard = new ClipboardJS('.mask_copy');
    clipboard.on('success', function(e) {
        $.toast("复制成功","text");
    });
    clipboard.on('error', function(e) {
        $.toast("复制失败","text");
    });
</script>
{/block}